<template>
  <div class="">
    <div class="goodslist-01">
      <div class="top-header border-bottom" v-if="isNone">
        <div class="top-back">
          <a href="javascript:history.go(-1)">返回</a>
        </div>
        <h2 class="f36">
          王者荣耀代练
        </h2>
      </div>
      <div class="rankdl-main" :class="{'pb-300':isNone}">
        <div class="rank-conn m-30 bg-fff rank-copad">
          <div v-if="stepOne">
            <div class="rank-titl color-m1 text-center f32">我要代练</div>
            <div class="rank-duan">
              <div class="rkduan-t fl border-bottom" @click="showGrade(1)">
                <span class="f32 color-999 text-center" v-if="!startInfo.Rank && !startInfo.Star">{{startInfo.text}}</span>
                <span class="f32 color-999 text-center" v-else>{{startInfo.Rank}} - {{startInfo.Star}}</span>
              </div>
              <div class="rkduan-c fl"></div>
              <div class="rkduan-t fl border-bottom" @click="showGrade(2)">
                <span class="f32 color-999 text-center" v-if="!endInfo.Rank && !endInfo.Star">{{endInfo.text}}</span>
                <span class="f32 color-999 text-center" v-else>{{endInfo.Rank}} - {{endInfo.Star}}</span>
              </div>
            </div>
          </div>
          <div v-if="!stepOne">
            <div class="rkculling-titl border-bottom" @click="stepOne=true">
              <div class="rkculling-t fl">
                <i class="tretn"></i>
                <span class="f32 color-m1 text-center">{{startInfo.Rank}} - {{startInfo.Star}}</span>
              </div>
              <div class="rkculling-c fl"></div>
              <div class="rkculling-t fl">
                <span class="f32 color-m1 text-center">{{endInfo.Rank}} - {{endInfo.Star}}</span>
              </div>
            </div>
            <div class="rkculling-down"></div>

            <div class="rkculling-conn">
              <div class="rkculling-t fl text-center border-right">
                <span class="f26 color-999">代练时间（小时）</span>
                <em class=" f36 color-000 fontbold" v-text="dlTime"></em>
              </div>
              <div class="rkculling-t fl text-center">
                <span class="f26 color-999">代练价格（元）</span>
                <em class="f36 color-m1 fontbold" v-text="dlPrice"></em>
              </div>
              <div class="rkculling-s"></div>
            </div>
          </div>

          <div class="rank-btn">
            <a class="text-center f36 color-fff" :class="[(startInfo.Rank!='' && startInfo.Star!='' && endInfo.Rank!='' && endInfo.Star!='' && !chooseGrade) && send?'bg-f54':'bg-bbb']" @click="next">立即下单</a>
          </div>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <transition name="bottom-fade">
      <div class="rankpop fixed-bottom bg-fff" :class="{'z-500':!isNone}" v-if="chooseGrade">
        <div class="rankpop-titl border-bottom">
          <a class="cancel f32 pl-30" @click="chooseGrade=false">取消</a>
          <span class="f32 color-000 text-center" v-text="now ? '请选择当前段位' : '请选择目标段位'"></span>
          <a class="finish f32 pr-30" @click="finish">完成</a>
        </div>
        <div class="rankpop-conn">
          <div class="list fl text-center f32">
            <ul>
              <li v-for="(item,index) in gradeList" :class="{active:current==index}" @click="csGrade(item,index)" :key="index">
                {{item.name}}
              </li>
            </ul>
          </div>
          <div class="list fr text-center f32">
            <ul>
              <li v-for="(item,index) in starList" :class="{active:tarCurrent==index}" @click="csStar(item,index)" :key="index">{{item.Star}}
              </li>
            </ul>
          </div>
        </div>

      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      list: [],
      gradeList: [],
      chooseGrade: false,
      now: true, //true 起始 false 结束
      startInfo: { text: "当前段位", Rank: "", Star: "", Order: "" },
      endInfo: { text: "目标段位", Rank: "", Star: "", Order: "" },
      starList: [],
      current: 0,
      tarCurrent: 0,
      stepOne: true,
      send: false,
      dlTime: "",
      dlPrice: ""
    };
  },
  props: {
    isNone: {
      type: Boolean,
      default: true
    }
  },
  computed: {},
  filters: {},
  watch: {
    chooseGrade(val) {
      if (!val) this.$emit("chooseShade", false);
    },
    starList(val) {
      this.$set(this.starList[0], "isTrue", true);
    }
  },
  created() {
    this.getGrade();
  },
  methods: {
    //获取段位信息
    getGrade() {
      this.$http.get(this.$CONSTANTS.APIdl + "levelingmainorder/getrank").then(
        res => {
          if (res.body.responseStatus.code == "00") {
            this.list = JSON.parse(res.body.result).List;
            let arr = this.list.map(item => {
              return item.Rank;
            });
            arr = [...new Set(arr)];
            arr.forEach(item => {
              this.gradeList.push({ name: item });
            });
          } else {
            this.$messagebox.alert(res.body.responseStatus.message);
          }
        },
        err => {}
      );
    },
    showGrade(s) {
      this.chooseGrade = true;
      this.$emit("chooseShade", true);
      if (s == 2) {
        this.now = false;
        this.startInfo.Rank
          ? this.showStar(this.startInfo.Rank)
          : this.showStar("青铜三"),
          (this.gradeList[0].isTrue = true);
      } else {
        this.now = true;
        if (!this.startInfo.Rank) {
          this.showStar("青铜三", 1);
          this.gradeList[0].isTrue = true;
        } else {
          //this.showStar(this.startInfo.Rank, 1);
          if (this.endInfo.Rank) {
            this.showStar(this.endInfo.Rank, 1);
          } else {
            this.showStar(this.startInfo.Rank, 1);
          }
        }
        if (!this.startInfo.Star) this.$set(this.starList[0], "isTrue", true);
      }
    },
    //结束段位去掉0星
    showStar(name, isnow) {
      this.starList = this.list.filter(i => {
        if (isnow) {
          if (i.Rank == name) {
            return i.Star;
          }
        } else {
          if (i.Rank == name && i.Star != "0星") {
            return i.Star;
          }
        }
      });
      if (!isnow) {
        this.$nextTick(() => {
          this.$set(this.starList[0], "isTrue", true);
          this.endInfo.Order = this.starList[0].Order;
        });
      }
    },
    //选择段位--展示星级
    csGrade(item, index) {
      this.current = index;
      this.gradeList.forEach(item => {
        if (item.isTrue) {
          item.isTrue = false;
        }
      });
      this.$set(item, "isTrue", true);
      if (this.now) {
        this.startInfo.Rank = item.name;
        this.showStar(item.name, 1);
      } else {
        this.endInfo.Rank = item.name;
        this.showStar(item.name);
      }
    },
    //选择星级
    csStar(item, index) {
      this.tarCurrent = index;
      this.starList.forEach(item => {
        if (item.isTrue) {
          item.isTrue = false;
        }
      });
      this.$set(item, "isTrue", true);
      if (this.now) {
        this.startInfo.Star = item.Star;
        this.startInfo.Order = item.Order;
      } else {
        this.endInfo.Star = item.Star;
        this.endInfo.Order = item.Order;
      }
    },
    //没选段位星级默认
    async defaultChoose(isnow) {
      this.gradeList.forEach(item => {
        if (item.isTrue) {
          isnow
            ? (this.startInfo.Rank = item.name)
            : (this.endInfo.Rank = item.name);
        }
      });
      this.starList.forEach(item => {
        if (item.isTrue) {
          if (isnow) {
            this.startInfo.Star = item.Star;
            this.startInfo.Order = item.Order;
          } else {
            this.endInfo.Star = item.Star;
            this.endInfo.Order = item.Order;
          }
        }
      });
    },
    finish() {
      this.chooseGrade = false;
      if (this.now) {
        if (!this.startInfo.Rank && !this.startInfo.Star) {
          //段位星级都未选择点击完成
          this.startInfo.Rank = this.gradeList[0].name;
          this.startInfo.Star = this.starList[0].Star;
          this.startInfo.Order = this.starList[0].Order;
        } else {
          this.$nextTick(() => {
            this.defaultChoose(1);
          });
        }
        this.$nextTick(() => {
          if (
            this.startInfo.Order &&
            this.endInfo.Order &&
            this.endInfo.Rank &&
            this.endInfo.Star
          ) {
            if (this.startInfo.Order >= this.endInfo.Order) {
              this.$messagebox.alert("目标段位不能低于起始段位");
            } else {
              this.send = true;
              this.getTime();
            }
          }
        });
      } else {
        this.defaultChoose();
        if (this.startInfo.Order >= this.endInfo.Order) {
          this.$messagebox.alert("目标段位不能低于起始段位");
        } else if (!this.startInfo.Order) {
          this.$messagebox.alert("请先选择起始段位");
        } else {
          this.send = true;
          this.getTime();
        }
      }
    },
    getTime() {
      let params = {
        danStart: this.startInfo.Order,
        danEnd: this.endInfo.Order
      };
      this.$http
        .get(this.$CONSTANTS.APIdl + "levelingmainorder/getprice", {
          params: params
        })
        .then(
          res => {
            if (res.body.responseStatus.code == "00") {
              this.stepOne = false;
              let rest = eval("(" + res.body.result + ")");
              this.dlTime = rest.data.time;
              this.dlPrice = rest.data.price;
            }
          },
          res => {}
        );
    },
    next() {
      if (!this.stepOne) {
        this.$router.push({
          name: "DlWzOrForm",
          params: {
            dwStart: this.startInfo.Order,
            dwEnd: this.endInfo.Order,
            dwQ: `${this.startInfo.Rank}${this.startInfo.Star}`,
            dwZ: `${this.endInfo.Rank}${this.endInfo.Star}`
          }
        });
      } else if (this.startInfo.Order >= this.endInfo.Order) {
        this.$messagebox.alert("目标段位不能低于起始段位");
      } else {
        this.getTime();
      }
    }
  }
};
</script>

<style src="css/dlAll/dl-cxy.css"></style>
<style scoped>
.bottom-fade-enter-active {
  transition: all 0.3s ease;
}

.bottom-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.bottom-fade-enter,
.bottom-fade-leave-active {
  transform: translateY(100px);
  opacity: 0;
}

.z-500 {
  z-index: 500;
}
</style>
